<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--<router-view></router-view>-->


    <!--<ul class="box" :class="aaa">-->
    <!--<li>学习Vue</li>-->
    <!--<li>学习Node</li>-->
    <!--<li>学习React</li>-->
    <!--</ul>-->

    <!--<ul class="box" :class="{'textColor':isColor, 'textSize':isSize}">-->
    <!--<li>学习Vue</li>-->
    <!--<li>学习Node</li>-->
    <!--<li>学习React</li>-->
    <!--</ul>-->

    <!--<ul class="box" :class="[isClassA?classA:classB]">-->
    <!--<li>学习Vue</li>-->
    <!--<li>学习Node</li>-->
    <!--<li>学习React</li>-->
    <!--</ul>-->

    <!--<div id="box" :style="styleObject">红嘴绿鹦哥</div>-->

    <!--<img class="box" :src="url" >-->

    <!--<span v-if="seen">你现在看得到我</span>-->

    <!--<li id="box" v-for="item in todos" >-->
    <!--{{item.id}}、{{item.text}}-->
    <!--</li>-->

    <!--<p>{{ message }}</p>-->
    <!--<button v-on:click="reverseMessage">翻转 message</button>-->

    <!--<p>{{ message }}</p>-->
    <!--<input v-model="message">-->

    <!--<firstcomponent></firstcomponent>-->
    <!--<game></game>-->

    <!--<ul>-->
    <!--<li ><router-link to="/first">点我到第一个页面</router-link></li>-->
    <!--<li ><router-link to="/second">点我到游戏页面</router-link></li>-->
    <!--</ul>-->
    <router-view></router-view>
  </div>
</template>

<script>
  //  import firstcomponent from './components/firstcomponent.vue'
  //  import game from './components/Game.vue'
  export default {
    name: 'app',

//    data(){
//      return {
//          message:'this is a vue test!'
//      }
//    },
//  components:{firstcomponent,game}

//  data(){
//      return{
//          message:'this is a vue test!'
//      }
//  },
//  methods:{
//    reverseMessage:function () {
//      this.message = this.message.split('').reverse().join('')
//    }
//  }
//  data(){
//      return{
//        aaa:{
//          'textColor':true,
//          'textSize':true //不渲染，注意看下面的截图
//        }
//      }
//  }

//  data(){
//      return {
//          isColor:true,
//        isSize:true
//      }
//  }
//  data(){
//      return{
//          classA:'textColor',
//        classB:'textSize',
//        isClassA:true
//      }
//  }

//  data(){
//      return{
//        styleObject:{
//          color:'red',
//    fontSize:'30px'
//        }
//      }
//  }

//  data(){
//      return{
//          url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
//      }
//  }
//}

//  data(){
//      return {
//          seen:true
//      }
//  }

//  data(){
//      return{
//          todos:[
//            { id:1,text: '学习 JavaScript' },
//            { id:1,text: '学习 Vue' },
//            { id:1,text: '创建激动人心的代码' }
//          ]
//      }
//  }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .box{
    border:1px dashed #f0f;

  }
  li{
    list-style:decimal;
  }

  .textColor{
    color:#f00;
    background-color:#eef;
  }
  .textSize{
    font-size:30px;
    font-weight:bold;
  }
</style>
